<template>
	<div class="footer">
		<slot>
			<div class="slot-class">
				<div>
					<p>一起约影吧</p>
					<p>精彩世界奔放</p>
				</div>
				<img src="/img/slider-list/footer1.png" alt="">
			</div>
		</slot>
		<ul>
			<li v-for="(item,key) in icons" :key="key">
				<router-link :to="item.href">
					<img :src="item.src" alt="">
					<h4>{{item.title}}</h4>
				</router-link>
			</li>
		</ul>
		<div>
			<p v-for="(item,key) in txts" :key="key">{{item.txt}}</p>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				icons:[
					{
						_id:'001',
						src:"/img/slider-list/footer1.png",
						href:'/',
						title:'演唱会'
					},
					{
						_id:'002',
						src:"/img/slider-list/footer1.png",
						href:'/',
						title:'话剧歌剧'
					},
					{
						_id:'003',
						src:"/img/slider-list/footer1.png",
						href:'/',
						title:'休闲展览'
					}],
				txts:[
					{txt:"版权归我公司所有"},
					{txt:"有关平台协议"},
					{txt:"平台相关政策"}
				]
			}
		}
	}
</script>
<style lang="scss" scoped>
	.footer{
		color:#a1a1a1;
		.slot-class{
			font-size: 26px;
			display: flex;
			>div{
				text-align: right;
				width:50%;
				line-height: 60px;
				margin-top: 40px;
			}
			img{
				padding: 0 50px;
				width: 50%;
        height:100%;
				display: inline-block;
			}
		}
		ul{
			display: flex;
			justify-content: space-around;
			li{
				width: 25%;
				img{
					width: 100%;
				}
				h4{
					color:#a1a1a1;
					font-size: 22px;
					text-align: center;
				}
			}
		}
		div:last-child{
			margin: 80px 20px;
			padding-bottom: 60px;
			p{
				font-size: 28px;
				text-align: center;
				margin-top: 30px;
			}
		}
		
	}
</style>
